<template>
    <div class="wc-hotvote" v-if="dTeams.length > 0">
        <div class="hv-title">给最喜爱的球队投一票</div>
        <!-- <div class="hv-desc">德国在355场预测中多得了300场冠军</div> -->
        <div class="hv-desc">投票机会每天一次，你可以明天再来给自己的球队刷票哦~</div>
        <div class="hv-teams">
            <div class="item" v-for="team in dTeams" :class="{'active': dCheck.indexOf(team.id) > -1}" :key="team.id" @click="_checkGroup(team.id)">
                <div class="flag" :class="team.flag"></div>
                <div class="name">{{team.name}}</div>
                <div class="border"></div>
            </div>
        </div>
        <br>
        <div class="btn-wrap">
            <mt-button type="danger" plain size="small" class="btn" @click="save">确定投票</mt-button>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import flags from './flags'
import util from '@/common/util'
export default {
    data () {
        return {
            dTeams: [],
            dCheck: []
        }
    },
    created () {
        this.fetch();
    },
    methods: {
        _checkGroup (id) {
            if (this.dCheck.indexOf(id) > -1) {
                this.dCheck.splice(this.dCheck.indexOf(id), 1);
            }else {
                if (this.dCheck.length == 3) {
                    return;
                }
                this.dCheck.push(id);
            }
        },
        save () {
            if (!this.dCheck.length) {
                util.alert('请选择您要支持的球队！');
                return;
            }
            axios.post('/api/java/country/support', {
                "openid": window.app.openId,
                "countryIds": this.dCheck
            }).then((res) => {
                util.alert('投票成功！');
            });
        },
        fetch () {
            axios.get('/api/java/country/list').then((res) => {
                var country = [10, 6, 2, 8, 26, 4, 23, 16, 33, 34, 35];
                var list = res.data.data.map((item) => {
                    item.flag = flags[item.id] && flags[item.id].flag;
                    return item;
                });
                
                list.forEach((item) => {
                    var index = country.indexOf(item.id);
                    if (index+1) {
                        this.dTeams[index] = item
                    }
                });
                this.dTeams.push({
                    id: 36,
                    flag: 'flag-other',
                    name: '其他'
                });
            })
        }
    }
}
</script>
<style lang="less" scoped>
    @import '~assets/less/country.less';
    .wc-hotvote {
        color: #fff;
    }
    .hv-title {
        text-align: center;
        font-size: 15px;
    }
    .hv-desc {
        margin-top: 8px;
        font-size: 13px;
        text-align: center;
        color: #AEB6C0;
    }
    .hv-teams {
        overflow: hidden;
        margin: 20px 10px 0;
        .item {
            float: left;
            position: relative;
            width: 33.33%;
            padding: 15px 0;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid transparent;
            border-radius: 10px;
            transition: all 0.5s;
        }
        .flag {
            display: inline-block;
            width: 65px;
            height: 60px;
            margin: 0 auto;
        }
        .name {
            margin-top: 15px;
        }
        .active {
            border: 1px solid #fff;
        }
    }
    .btn-wrap {
        display: flex;
        justify-content: center;
        .btn {
            margin: 0 10px;
            border-color: #fff;
            color: #fff;
        }
    }
</style>
